<template>
  <el-drawer append-to-body destroy-on-close
             :visible.sync="show"
             :title="title"
             :size="size"
             custom-class="k-drawer">
    <div class="k-drawer__content">
      <div class="k-drawer__body">
        <slot></slot>
      </div>

      <div class="k-drawer__footer" v-show="showFooter">
        <slot name="footer"></slot>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { Vue, Component } from 'vue-property-decorator'
@Component({
  props: {
    value: Boolean,
    title: String,
    size: [Number, String]
  }
})
export default class KDrawer extends Vue {
  get show () {
    return this.value
  }

  set show (val) {
    this.$emit('input', val)
  }

  get showFooter () {
    return !!this.$scopedSlots.footer
  }

}
</script>

<style scoped lang="scss">
/deep/ .k-drawer {
  .el-drawer__header {
    margin: 0;
    padding: 10px 20px;
    border-bottom: solid 1px #f3f3f3;
  }
  .el-drawer__body {
    position: relative;
  }
}
.k-drawer {
  &__content {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  &__body {
    flex: 1;
    padding: 15px;
    overflow: auto;
  }
  &__footer {
    padding: 10px 15px;
    border-top: solid 1px #f3f3f3;
  }
}
</style>
